<template>
  <div>
    <div id="3Dcharts" class="echarts3d"></div>
    <div id="warter" class="echartscate"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import $ from "jquery";
export default {
  data() {
    return {
      series: [
        {
          //Y轴画线
          type: "line3D",
          data: [
            [0, -10, 0],
            [0, 10, 0],
          ],
          lineStyle: {
            color: "#000",
          },
        },
        {
          //X轴画线
          type: "line3D",
          data: [
            [-10, 0, 0],
            [10, 0, 0],
          ],
          lineStyle: {
            color: "#000",
          },
        },
        {
          //z轴画线
          type: "line3D",
          data: [
            [0, 0, -10],
            [0, 0, 10],
          ],
          lineStyle: {
            color: "#000",
          },
        },
      ],
    };
  },
  mounted() {
    this.ect3D();
    this.ectCate();
  },
  methods: {
    ect3D() {
      var chartDom = document.getElementById("3Dcharts");
      var myChart = echarts.init(chartDom);
      $.get("/stations.json", (res) => {//改
        var shujuji = res.features[4].properties.value;
        var shujData = []; //散点三维坐标
        var lineData = []; //线段
        var onepoint = [];//侧视图
        var oneLine = []//侧视图线段
        var towpoint = []//正视图散点
        var towLine = []//正视图线段
        var thrpoint = []//俯视图散点
        var thrLine = []//俯视图线段
        for (var j = 0; j < shujuji.x.length; j++) {
          // 三维图
          var coordinate = [shujuji.x[j], shujuji.y[j], shujuji.z[j]];
          shujData.push(coordinate);
          var line = [[0, 0, 0], coordinate];
          lineData.push(line);
          // 侧视图
          onepoint.push([shujuji.y[j],shujuji.z[j]])
          var line1 = [//侧视图线段
            {
              coord:[0,0]
            },
            {
              coord:[shujuji.y[j],shujuji.z[j]]
            }
          ]
          oneLine.push(line1)
          //正视图
          towpoint.push([shujuji.x[j],shujuji.z[j]])
          var line2 = [
            {
              coord:[0,0]
            },
            {
              coord:[shujuji.x[j],shujuji.z[j]]
            }
          ]
          towLine.push(line2)
          // 俯视图
          thrpoint.push([shujuji.x[j],shujuji.y[j]])
          var line3 = [
            {
              coord:[0,0]
            },
            {
              coord:[shujuji.x[j],shujuji.y[j]]
            }
          ]
          thrLine.push(line3)
        }
        for (var i = 0; i < lineData.length; i++) {
          //循环连线原点与散点
          var datas = lineData[i];
          var obj = {
            type: "line3D",
            data: datas,
            tooltip:{
              show:false,
            }
          };
          this.series.push(obj);
        }

        var scatterData = {
          //加载散点
          type: "scatter3D", //左侧图标类型为3D散点
          symbolSize: 8, //标记的大小（散点图点的大小）
          encode: {
            x: "",
            y: "",
            z: "",
            // tooltip: [0, 1, 2, 3, 4],
          },
          data: shujData,
        };
        this.series.push(scatterData);
        
        var lookone = {//侧视图
          type: "scatter",
          symbolSize: 7,
          xAxisIndex: 2,
          yAxisIndex: 2,
          encode: {
            x: "",
            y: "",
            // tooltip: [0, 1, 2, 3, 4],
          },
          data:onepoint,
          markLine: {
            symbol: "none",
            silent: true,
            lineStyle: {
              normal: {
                type: "solid",
              },
            },
            data: oneLine,
          },
        }
        this.series.push(lookone);
        var looktow = {//正视图
          type: "scatter",
          symbolSize: 7,
          xAxisIndex: 0,
          yAxisIndex: 0,
          encode: {
            x: "",
            y: "",
            // tooltip: [0, 1, 2, 3, 4],
          },
          data:towpoint,
          markLine: {
            symbol: "none",
            silent: true,
            lineStyle: {
              normal: {
                type: "solid",
              },
            },
            data: towLine,
          },
        }
        this.series.push(looktow)
        var lookthree = {
          type: "scatter",
          symbolSize: 7,
          xAxisIndex: 3,
          yAxisIndex: 3,
          encode: {
            x: "",
            y: "",
            // tooltip: [0, 1, 2, 3, 4],
          },
          data:thrpoint,
          markLine: {
            symbol: "none",
            silent: true,
            lineStyle: {
              normal: {
                type: "solid",
              },
            },
            data: thrLine,
          },
        }
        this.series.push(lookthree)
        var sizeValue = "57%";
        var option = {
          tooltip: {
            // trigger: "axis",
            axisPointer: {
              // 坐标轴指示器配置项。
              type: "none", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: "auto", // 指示器的坐标轴。
              snap: true, // 坐标轴指示器是否自动吸附到点上
            },
            formatter:'value:{c}'
          },
          grid3D: {
            width: "50%",
          },
          xAxis3D: {
            min: -10,
            max: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          yAxis3D: {
            min: -10,
            max: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          zAxis3D: {
            min: -10,
            max: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ccc",
              },
            },
          },
          grid: [
            //右侧四个视图的位置
            { left: "60%", width: "20%", bottom: sizeValue },
            { left: "", width: "0", height: "0", bottom: "" },
            { left: "50%", width: "20%", top: sizeValue },
            { left: "75%", width: "20%", top: sizeValue },
          ],
          xAxis: [
            //右侧四个图形X轴的样式
            {
              type: "value",
              gridIndex: 0,
              min: -10,
              max: 10,
              // offset:-100,
              name: "z", //name:横坐标的名字
              axisLabel: { rotate: 50, interval: 0 },
            },
            {
              //空//隐藏
              type: "",
              gridIndex: 1,
              name: "",
              min: -10,
              max: 10,
              boundaryGap: false,
              // interval:让所有坐标值全部显示
              axisLabel: { rotate: 50, interval: 0 }, //rotate:让坐标值旋转一定角度
            },
            {
              type: "value",
              gridIndex: 2,
              min: -10,
              max: 10,
              name: "z",
              axisLabel: { rotate: 50, interval: 0 },
            },
            {
              type: "value",
              gridIndex: 3,
              min: -10,
              max: 10,
              name: "x",
              axisLabel: { rotate: 50, interval: 0 },
            },
          ],
          yAxis: [
            //右边四个视图对应Y轴的样式
            {
              min: -10,
              max: 10,
              type: "value",
              gridIndex: 0,
              name: "y",
            },
            { type: "", min: -10, max: 10, gridIndex: 1, name: "" },
            {
              type: "value",
              min: -10,
              max: 10,
              gridIndex: 2,
              name: "x",
            },
            {
              type: "value",
              min: -10,
              max: 10,
              gridIndex: 3,
              name: "x",
            },
          ],
          series: this.series,
        };
        option && myChart.setOption(option);
      });
    },
    ectCate() {
      //折线统计图//水位
      let chart = document.getElementById("warter");
      var myChart = echarts.init(chart);
      $.get("/stations.json", (res) => {
        console.log(res);
        var dataValue = res.features[0].properties.value;//改
        var option2 = {
          xAxis: {
            type: "category",
            axisLabel: {
              interval: 0,
            },
            data: [
              "00:00",
              "02:00",
              "04:00",
              "06:00",
              "08:00",
              "10:00",
              "12:00",
              "14:00",
              "16:00",
              "18:00",
              "20:00",
              "22:00",
            ],
          },
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: '{value}m'
            }
          },
          visualMap: {//改gt
            show: false,
            pieces: [
              {
                gt: 0,
                lte: 6,
                color: "#44DE43",
              },
              {
                gt: 6,
                lte: 12,
                color: "#FEE600",
              },
              {
                gt: 12,
                lte: 15,
                color: "#FFA35F ",
              },
              {
                gt: 15,
                color: "#FE000F",
              },
            ],
          },
          series: [
            {
              data: dataValue,
              type: "line",
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#f00",
                },
              },
            },
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器配置项。
              type: "none", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: "auto", // 指示器的坐标轴。
              snap: true, // 坐标轴指示器是否自动吸附到点上
            },
            formatter:'水位:{c}米<br />时间:{b}'//改
          },
        };
        option2 && myChart.setOption(option2);
      });
    },
  },
};
</script>

<style>
.echarts3d {
  margin-left: 3px;
  width: 900px;
  height: 600px;
  border: 1px solid rgb(94, 90, 90);
}
.echartscate {
  position: absolute;
  right: 0;
  top: 0;
  width: 600px;
  height: 500px;
}
</style>